<template>
  <div class="components-table">
    <el-table
      v-if="sumData.length"
      :data="tableData"
      style="width: 100%"
      header-cell-class-name="table-header"
      row-class-name="table-row-low"
    >
      <el-table-column
        prop="pageName"
        :label="pageType === '1'?$t('dataAnalysis.visitPage'):$t('product.prodName')"
        fixed="left"
        width="300"
      />
      <el-table-column
        v-if="isVisible1"
        prop="visis"
        :label="$t('dataAnalysis.pageviews')"
      >
        <template #header>
          {{ $t('dataAnalysis.pageviews') }}
          <sortButton
            :index="0"
            :type="1"
            :is-sort="isSort[0]"
            @change-sort="changeSort"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible2"
        prop="visitUser"
        :label="$t('dataAnalysis.numberOfVisitors')"
      >
        <template #header>
          {{ $t('dataAnalysis.numberOfVisitors') }}
          <sortButton
            :index="1"
            :type="2"
            :is-sort="isSort[1]"
            @change-sort="changeSort"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible7"
        prop="averageStopTime"
        :label="$t('dataAnalysis.stayTime')"
      />
      <el-table-column
        v-if="isVisible8"
        prop="shareVisit"
        :label="$t('dataAnalysis.shareTimes')"
      >
        <template #header>
          {{ $t('dataAnalysis.shareTimes') }}
          <sortButton
            :index="6"
            :type="5"
            :is-sort="isSort[6]"
            @change-sort="changeSort"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible9"
        prop="shareVisitUser"
        :label="$t('dataAnalysis.sharePeopleTimes')"
      >
        <template #header>
          {{ $t('dataAnalysis.sharePeopleTimes') }}
          <sortButton
            :index="7"
            :type="6"
            :is-sort="isSort[7]"
            @change-sort="changeSort"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible10"
        prop="placeOrderAmount"
        :label="$t('dataAnalysis.gTOrderAmount')"
      >
        <template #header>
          {{ $t('dataAnalysis.gTOrderAmount') }}
          <sortButton
            :index="8"
            :type="7"
            :is-sort="isSort[8]"
            @change-sort="changeSort"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible11"
        prop="placeOrderUser"
        :label="$t('dataAnalysis.gTNumber')"
      >
        <template #header>
          {{ $t('dataAnalysis.gTNumber') }}
          <sortButton
            :index="9"
            :type="8"
            :is-sort="isSort[9]"
            @change-sort="changeSort"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible12"
        prop="visitToPlaceOrderRate"
        :label="$t('dataAnalysis.bAOC')"
      />
      <el-table-column
        v-if="isVisible13"
        prop="payAmount"
        :label="$t('dataAnalysis.gtPA')"
      >
        <template #header>
          {{ $t('dataAnalysis.gtPA') }}
          <sortButton
            :index="11"
            :type="9"
            :is-sort="isSort[11]"
            @change-sort="changeSort"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible14"
        prop="payUser"
        :label="$t('dataAnalysis.gPayNumber')"
      >
        <template #header>
          {{ $t('dataAnalysis.gPayNumber') }}
          <sortButton
            :index="12"
            :type="10"
            :is-sort="isSort[12]"
            @change-sort="changeSort"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible15"
        prop="visitToPayRate"
        :label="$t('dataAnalysis.gVToP')"
      />
    </el-table>
    <div
      v-else
      class="empty"
    >
      {{ $t("dataAnalysis.pleaseSelectIndicator") }}
    </div>
  </div>
</template>

<script setup>
import sortButton from './sort-button.vue'

const emit = defineEmits(['sortData'])
const props = defineProps({
  prodData: {
    type: Object,
    default: null
  },
  pageType: {
    type: String,
    default: '1'
  }
})

const tableData = ref(props.prodData.data)
const sumData = ref(props.prodData.sumData)
watch(() => props.prodData, (newValue) => {
  tableData.value = newValue.data
  sumData.value = newValue.sumData
  changVisibles()
}, { deep: true })

const judgeStrArrIncludeOtherString = (str) => {
  return sumData.value.includes(str)
}
/**
 * 控制表格列显隐
 */
const isVisible1 = ref(false)
const isVisible2 = ref(false)
const isVisible7 = ref(false)
const isVisible8 = ref(false)
const isVisible9 = ref(false)
const isVisible10 = ref(false)
const isVisible11 = ref(false)
const isVisible12 = ref(false)
const isVisible13 = ref(false)
const isVisible14 = ref(false)
const isVisible15 = ref(false)
const changVisibles = () => {
  isVisible1.value = judgeStrArrIncludeOtherString($t('dataAnalysis.pageviews'))
  isVisible2.value = judgeStrArrIncludeOtherString($t('dataAnalysis.numberOfVisitors'))
  isVisible7.value = judgeStrArrIncludeOtherString($t('dataAnalysis.stayTime'))
  isVisible8.value = judgeStrArrIncludeOtherString($t('dataAnalysis.shareTimes'))
  isVisible9.value = judgeStrArrIncludeOtherString($t('dataAnalysis.sharePeopleTimes'))
  isVisible10.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gTOrderAmount'))
  isVisible11.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gTNumber'))
  isVisible12.value = judgeStrArrIncludeOtherString($t('dataAnalysis.bAOC'))
  isVisible13.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gtPA'))
  isVisible14.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gPayNumber'))
  isVisible15.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gVToP'))
}

const isSort = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
const changeSort = (sort, num, type) => {
  const val = isSort.value[num] !== sort ? sort : 0
  isSort.value = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  isSort.value[num] = val
  emit('sortData', sort, type)
}

</script>
<style lang="scss" scoped>
.components-table {
  margin-top: 20px;
  border: 1px solid #eee;
  border-bottom: none;
  .empty {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #eee;
  }
}
</style>
